$('#head').load('./tou.html');
$('#footer').load('./jiao.html');

var arr = queryArr();
APIjiesuan({ arr: JSON.stringify(arr) }).then(({ data }) => {
    var html = '';
    var moneys = 0;
    $(data).each((key, { gname, shumu, img, price, gid }) => {
        var counts = 0;
        counts += shumu * 1;
        moneys += price * counts;
        html += `
        <div class="car">
                    <div class="tu"><img src=${img} alt=""></div>
                    <div class="zi">
                        <p>${gname}</p>
                        <p>商品${gid}</p>
                        <p>尺码：M</p>
                        <p style="font-size:14px;">数量：${shumu} @ ￥${price}</p>
                        <p class="jiage">￥${(shumu * price).toFixed(2)}</p>
                    </div>
                </div>
        `
    })
    $('.r3').html(html);
    $('.zongjia').html('￥' + moneys);

    //端口写法导致此种状况，好好想想
    // var html = '';
    // console.log(data);
    // var { gname, shumu, img, price, gid } = data;
    // html += `
    //     <div class="car">
    //                 <div class="tu"><img src=${img} alt=""></div>
    //                 <div class="zi">
    //                     <p>${gname}</p>
    //                     <p>商品${gid}</p>
    //                     <p>尺码：M</p>
    //                     <p>数量：${shumu} @ ￥${price}</p>
    //                     <p class="jiage">${(shumu * price).toFixed(2)}</p>
    //                 </div>
    //             </div>
    //     `
    // $('.r3').html($('.r3').html() + html);//自行领会
})

// console.log($('.jiage').html());


//三级联动
//一级
$('.sheng').click(function () {
    $('.sheng1').slideToggle();//滑动效果，有就加，没有就删！！
})
$('.sheng1').on('click', 'p', function (e) {
    $('.sheng2').html($(e.target).html())
    // console.log($(e.target).html()); 
    // console.log($(e.target).attr('class'));
    var id = $(e.target).attr('class')
    APIsanji().then(({ data: { address } }) => {
        var [obj] = JSON.parse(address).filter(item => item.city_id == id);
        var list = obj['list'];
        var html = '';
        $(list).each((value, { name, city_id }) => {
            html += `
            <p class="${city_id}">${name}</p>
            `
        })
        $('.shi1').html(html);
    })
})

//二级
$('.shi').click(function () {
    $('.shi1').slideToggle();
})
$('.shi1').on('click', 'p', function (e) {
    $('.shi2').html($(e.target).html());
    console.log($(e.target).attr('class'));
    var id = $(e.target).attr('class');
    console.log(id.length);
    if (id.length === 8) {
        return
    } else {
        $('.qu').css('display', 'block');
        $('.ququ').css('display', 'block');
        var html = '';
        APIsanji().then(({ data: { address } }) => {
            // console.log(JSON.parse(address));
            // console.log(id.substring(0,4));
            var [obj] = JSON.parse(address).filter(item => item.city_id == id.substring(0, 4));
            var list = obj['list'];
            var list2 = list.filter(item => item.city_id == id);
            // console.log(list2[0]['list']);
            var list3 = list2[0]['list'];
            $(list3).each((index, { name }) => {
                html += `
                <p>${name}</p>
                `
            })
            $('.qu1').html(html);
        })
    }
})

//三级
$('.qu').click(function () {
    $('.qu1').slideToggle();
})
$('.qu1').on('click', 'p', function (e) {
    $('.qu2').html($(e.target).html())
})


APIsanji().then(({ data: { address } }) => {
    // console.log(JSON.parse(address));
    var address = JSON.parse(address)
    var html = '';
    $(address).each((value, { name, city_id }) => {
        html += `
        <p class="${city_id}">${name}</p>
        `
        // console.log(list);
    })
    $('.sheng1').html(html);
})